<!-- 注册页面 -->
<template>
  <view class="logBox">
    <view class="logTab">
      <view class="logTab-title">
        <wd-icon
          name="thin-arrow-left"
          size="19px"
          color="#fff"
          style="margin: 15rpx"
          @click="fhHome"
        />
        <text @click="jump">登录</text>
      </view>
      <h2>注册</h2>
    </view>

    <view class="logContent">
      <wd-form ref="form" :model="model" style="width: 90%">
        <wd-cell-group border>
          <wd-input
            v-model="model.value1"
            style="margin-bottom: 15rpx"
            label-width="100px"
            prop="value1"
            clearable
            placeholder="请输入手机号"
            :rules="[
              { required: true, message: '请填写手机号' },
              {
                pattern: /^1[3-9]\d{9}$/,
                message: '手机号格式错误',
                required: false,
              },
            ]"
          />
          <view style="display: flex; align-items: center">
            <wd-input
              v-model="model.value3"
              style="width: 90%; margin-bottom: 15rpx"
              label-width="100px"
              prop="value3"
              clearable
              placeholder="请输入验证码"
              :rules="[{ required: true, message: '请填写验证码' }]"
            />
            <wd-button
              type="info"
              size="small"
              :disabled="aaaaa"
              @click="(countdownInfo.isDisabled = true), countdown(), setTokem()"
            >
              {{
                countdownInfo.isDisabled
                  ? countdownInfo.second + "秒后重试"
                  : countdownInfo.buttonName
              }}
            </wd-button>
          </view>

          <wd-input
            v-model="model.value2"
            label-width="100px"
            prop="value2"
            show-password
            clearable
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </wd-cell-group>
      </wd-form>

      <view style="width: 90%">
        <wd-checkbox v-model="loginValue.zcBol" checked-color="#45d4bf" disabled @click="switching">
          我已同意
          <text color="#00c8ab">优医协议</text>
        </wd-checkbox>
      </view>
      <wd-button
        type="success"
        custom-class="custom-shadow"
        :disabled="loginValue.zcBol ? false : true"
        @click="zhuce"
      >
        注册
      </wd-button>
    </view>

    <text style="margin-top: 70rpx; font-size: 28rpx; color: #d1d1d1">微信登录</text>
    <img
      src="@/static/login/wx.png"
      alt=""
      style="width: 60rpx; height: 60rpx; margin-top: 25rpx"
    />
  </view>
</template>

<script lang="ts" setup>
import { LoginPinia } from "@/store/modules/Login";
import { useToast } from "wot-design-uni";

// 用来判断哪个是手机号哪个是密码
const checkValue = ref(false);
const countdownInfo = ref({
  second: 60, // 倒计时秒数
  buttonName: "获取验证码", // 按钮名称
  isDisabled: false, // 按钮是否有效，默认有效
});
const { success: showSuccess } = useToast();
const loginValue = LoginPinia();
const model = reactive<{
  value1: string;
  value2: string;
  value3: string;
}>({
  value1: "",
  value2: "",
  value3: "",
});

const form = ref();
function setTokem() {
  localStorage.setItem("tokena", "2345");
}
function zhuce() {
  form.value
    .validate()
    .then(({ valid }) => {
      if (valid) {
        for (let i = 0; i < loginValue.user.length; i++) {
          if (model.value1 != loginValue.user[i].phone) {
            if (i == loginValue.user.length - 1) {
              if (model.value3 == localStorage.getItem("tokena")) {
                //添加到数据库中
                const obj = {
                  id: loginValue.user.length + "",
                  phone: model.value1,
                  password: model.value2,
                };
                loginValue.pushUser(obj);
                console.log("注册成功");
                console.log(loginValue.user);

                uni.navigateTo({ url: "/pages/login/index" });
                break;
              }
            }
          } else {
            console.log("账号已存在");
            break;
          }
        }
      }
    })
    .catch((error: any) => {
      console.log(error, "error");
    });
}

//按钮可点不可点
function switching() {
  uni.navigateTo({ url: "/pages/Agreement/index?cac=2" });
}

// 定义倒计时函数
const countdown = () => {
  countdownInfo.value.isDisabled = true; // 按钮无效
  let interval = window.setInterval(() => {
    countdownInfo.value.buttonName = countdownInfo.value.second + "秒后重新获取"; // 重新设置按钮名称
    countdownInfo.value.second -= 1; // 倒计时减1
    if (countdownInfo.value.second <= 0) {
      countdownInfo.value.buttonName = "获取验证码";
      countdownInfo.value.second = 60;
      countdownInfo.value.isDisabled = false;
      window.clearInterval(interval);
    }
  }, 1000); // 每秒执行一次
};
// 监听对象，数据是否发生改变，改变就进行重新保存
watch(
  countdownInfo,
  (newValue) => {
    if (!newValue.isDisabled) {
      localStorage.clear();
    }
    const JSONSTR = JSON.stringify(newValue); // 将对象转为字符串
    localStorage.setItem("countdownInfo", JSONSTR); // 将其保存到localStorage中
  },
  {
    deep: true, // 深度监听
  }
);
//跳转到登录页面
function jump() {
  uni.navigateTo({ url: "/pages/login/index" });
  localStorage.clear();
}

function fhHome() {
  uni.navigateTo({ url: "/pages/login/index" });
  localStorage.clear();
}

//手机号正确就可以获取验证码
const aaaaa = ref(true);
function isValidPhoneNumber(phoneNumber: any) {
  const regex = /^1[3-9]\d{9}$/;
  return regex.test(phoneNumber);
}

watchEffect(() => {
  if (isValidPhoneNumber(model.value1)) {
    aaaaa.value = false;
  } else {
    aaaaa.value = true;
  }
});
</script>

<style lang="scss" scoped>
.logBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100vh;
  .logTab {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 350rpx;
    padding: 0 100rpx;
    background-color: #00c8aa;
    .logTab-title {
      display: flex;
      justify-content: space-between;
      width: 100%;
      text {
        margin: 15rpx;
        color: #ffffff;
      }
    }
    h2 {
      margin-top: 60rpx;
      color: #ffffff;
    }
  }

  .logContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    height: 500rpx;
    padding: 25rpx 0;
    margin-top: -100rpx;
    background-color: #fff;
    border-radius: 12rpx;
    box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.3);
    .custom-shadow {
      width: 90%;
    }
  }
}
</style>
